<template>
	<div class="Personalized">
		<div class="title">
			<h3>精选MV</h3>
			<i @click="more" class="iconfont icon-you"></i>
		</div>
		<div class="only" @click="mvplay(item.id,item.artistId)" v-for="(item,index) in mv" :key="index">
			<div class="imgbox">
				<img :src="item.picUrl" alt="" />
				<i class="iconfont icon-bofang"></i>
			</div>
			<div class="bottomtitle">
				<h2>{{item.copywriter}}</h2>

			</div>
			<div class="bottom">
				<div class="goods">
					<i class="iconfont icon-dianzan"></i>
					<span>{{item.duration.toString().substring(0,item.duration.toString().length-3)}}</span>
					<i class="iconfont icon-pinglun"></i>
					<span>{{item.playCount.toString().substring(0,item.playCount.toString().length-3)}}</span>
				</div>
				<i class="iconfont icon-dashujukeshihuaico-"></i>

			</div>
			<div class="line"></div>

		</div>

	</div>
</template>

<script>
	export default {
		props: {
			mv: Array
		},
		methods: {
			more() {
				this.$router.push({
					name: "myvideo"
				})
			},
			mvplay(id, artistId) {
				this.$router.push({
					name: "mvdetails",
					params: {
						id: id,
						artistId: artistId
					}
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/assets/css/common.scss";
	.Personalized {
		margin: vw(10) 0 0;
		background: #fff;
		.title {
			padding: vw(16) vw(16) vw(26);
			display: flex;
			justify-content: space-between;
			align-items: center;
			h3 {
				font-size: vw(16);
			}
		}
		.only {
			width: 100%;
			margin: 0 0 vw(30);
			padding: 0 vw(16);
			.imgbox {
				width: 100%;
				height: vw(160);
				background-color: #eee;
				overflow: hidden;
				position: relative;
				border-radius: vw(10);
				img {
					width: 100%;
				}
				i {
					font-size: vw(50);
					color: rgba(255, 255, 255, .7);
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
			}
			.bottomtitle {
				padding: 0 vw(10);
				background-color: #f3f3f3;
				height: vw(48);
				h2 {
					width: 96%;
					font-size: vw(14);
					color: #666;
					line-height: vw(48);
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					position: relative;
				}
			}
			.bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.goods {
					margin: vw(8) 0 0;
					i {
						font-size: vw(16);
						color: #666;
						margin-right: vw(6);
						margin-left: vw(10);
					}
					span {
						font-size: vw(14);
						color: #666;
					}
				}
				i {
					font-size: vw(28);
				}
			}
			.line {
				width: 100%;
				height: vw(1);
				background-color: #f3f3f3;
				margin: vw(10) 0;
			}
		}
	}
</style>